<template>
	<div v-if="dialogVisible">
		<el-dialog title="选择图" :visible.sync="dialogVisible" width="800px"	class="uploaddialog" :modal='false'>
			<div>
				<div class="uploadtop">
					<!-- <span>图片({{total}})</span>
					<span>图标</span> -->
					
					<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
					    <el-tab-pane label="图片" name="first">图片({{total}})</el-tab-pane>
					</el-tabs>
					
				</div>
				
				<uploadbottomimage ref="uploadbottomimg" v-on:updateImageTotal="updateImageTotal" v-if="activeName == 'first' "></uploadbottomimage>
				
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="condialogVisible">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import uploadbottomimage from '@/components/common/uploadbottomimage.vue';
	export default {
		components: {
	       uploadbottomimage
		},
		data() {
			return {
				dialogVisible:false,
				total:0,
				isone:true,
				activeName: 'first',
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			condialogVisible() {//确认按钮
				let data=this.$refs.uploadbottomimg.multipleSelection;
				console.log(data,'1111')
				if(this.isone=true){
				 if(data.length!=1){
				 	this.$message.error('只能选择1个图片！');
					return;
				 }
				this.$emit('childByImageValue', data[0].file_path)
				//console.log(data[0].src)
				}else{
				this.$emit('childByImageValue', data)	
				}
				this.dialogVisible=false;
			},
			updateImageTotal:function (childValue){
				this.total=childValue;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uploaddialog {
		.el-tree-node:focus>.el-tree-node__content {
			background-color: #409EFF;
			color: white;
		}
         
		.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
			background-color: #409EFF;
			color: white;
		}

		.uploadtop {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			line-height: 50px;
			margin-bottom: 10px;

			span {
				padding-left: 20px;
				padding-right: 10px;
				display: inline-block;
				line-height: 50px;

			}
		}

	}

</style>
